<template>

	<div>
		<div style="width:100%;text-align:center;margin-top:10px;margin-bottom:10px">
			<h1 class="huiyuan">VIP会员</h1>	
		</div>
		
		<!-- 轮播图 -->
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<van-swipe :autoplay="3000" :height='150' class="swipe" style="margin-bottom:50px">
					<van-swipe-item v-for="(image, index) in images" :key="index">
						<!-- :key="index" -->
						<img :src="image.banner_img_url" class="image" />
					</van-swipe-item>
				</van-swipe>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>

		<!-- 完 -->
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<h2>VIP最新推荐</h2>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>

		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<van-row type="flex" justify="space-around" v-for="video in videos" :key="index">
					<van-col span="10" class="new">
						<video width="100%" height="100%" controls>
							<source :src="video.video" type="video/mp4">
						</video>
					</van-col>

					<van-col span="10" class="new">
						<video width="100%" height="100%" controls>
							<source :src="video.video" type="video/mp4">
						</video>
					</van-col>
				</van-row>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>
		<!-- VIP最新推荐 -->
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<h2>VIP限时免费</h2>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<van-row type="flex" justify="space-around" v-for="video in videos" :key="index">
					<van-col span="10" class="new">
						<video width="100%" height="100%" controls>
							<source :src="video.video" type="video/mp4">
						</video>
					</van-col>
		
					<van-col span="10" class="new">
						<video width="100%" height="100%" controls>
							<source :src="video.video" type="video/mp4">
						</video>
					</van-col>
				</van-row>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>
		<!-- VIP限时免费完 -->
		
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				<h2>VIP特邀名厨</h2>
			</van-col>
			<van-col span="1"></van-col>
		</van-row>
		<van-row type="flex">
			<van-col span="1"></van-col>
			<van-col span="22">
				
				<van-row type="flex" justify="space-around" style="margin-bottom:60px;">
				  <van-col span="11" style="position:relative">
					
				<van-image
				  width="100%"
				  height="230px"
				  src="https://img.yzcdn.cn/vant/cat.jpeg " />
				 <p style="position:absolute;left:5px;bottom:30px;">无肉不欢星人最爱</p>
				  </van-col>
				
				  <van-col span="11"  style="position:relative">
						<van-image
					  width="100%"
					  height="230px"
					  src="https://img.yzcdn.cn/vant/cat.jpeg " />
					 <p style="position:absolute;left:5px;bottom:30px;">无肉不欢星人最爱</p>  
					  
				  </van-col>
				</van-row>
				
			</van-col>
			<van-col span="1"></van-col>
		</van-row>
		
		
	</div>
</template>

<script>
	import axios from 'axios'
	import Mock from 'mockjs'
	export default {
		name: 'Kitchen',
		data() {
			return {
				images: [],
				videos: [],
				index:''
			}
		},


		mounted() {
			let that = this
			axios({
					url: ' http://jx.xuzhixiang.top/ap/api/bannerlist.php',
					params: {
						uid: 14515
					}
				}).then((res) => {
					// console.log(res.data.data)
					that.images = res.data.data
				}),
				
				axios({
					url: 'http://jx.xuzhixiang.top/ap/api/add-product.php',
				}).then((res) => {
					console.log(res.data.video)
					that.videos = res.data.video
				})
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0
	}

	h1,
	h2 {
		font-weight: normal;
		color: #101010
	}

	.image {
		width: 100%;
		height: 100%;
		display: inline-block;
	}

	.huiyuan {
		font-size: 18px;

	}
	
	h2 {
		font-size: 20px;
		
		margin-bottom: 12px;
	}
	.new {
		height: 150px;
		margin-bottom: 50px
	}
	p{
		font-size:18px;color:#101010;
	}
</style>
